<script>
/**
 * @desc 点击'发布动态'后,弹出的'编辑发布内容'的层
 */

export default {
  name: 'release-layer',
  props: {
    show: Boolean,
    imageUrl: String,
    text: String,
    handleReplaceImg: Function,
    handleSubmit: Function,
    handleChangeText: Function,
    handleCancel: Function
  }
}
</script>

<template>
  <div
    class="release-layer"
    :class="{'show':show}"
  >
    <p class="close" @click="handleCancel">取消</p>
    <img class="chosen-img" :src="imageUrl" mode="aspectFill" />
    <div @click="handleReplaceImg">更换图片</div>
    <div class="article">
      <input type="text" :value="text" @change="handleChangeText"></div>
    <div @click="handleSubmit">发布</div>
  </div>
</template>

<style lang="scss">
.release-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
  transition: all 0.25s;
  visibility: hidden;
  &.show {
    visibility: visible;
  }

  .chosen-img {
    width: 100%;
    height: 300rpx;
  }
}
</style>
